<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七哥的fastify+mysql后端接口测试</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <form action="">
        <input type="text" name="userid" placeholder="ID">
        <input type="text" name="username" placeholder="用户名">
        <input type="text" name="ps" placeholder="备注">
    </form>
    <button type="submit" id="btn">发送</button>
    <button type="submit" id="ggbtn">更改(以id检索数据后修改)</button>
    <br>
    <br>
    <br>
    <br>
    <input type="text" id="cx" placeholder="输入查询的ID">
    <button id='cxBtn'>删除</button>
    <br>
    <br>
    <br>
    <br>
    <button id="select">查询所有数据</button>
    <div id="cxbox">
    </div>
    <script>
        let btn = document.querySelector('#btn')
        let btn1 = document.querySelector('#ggbtn')
        let form = document.querySelector('form')
        // 增加数据
        btn.onclick = (e) => {
            e.preventDefault();
            let formData = new FormData(form)
            console.log(formData.get("userid"), formData.get("username"), formData.get("ps"))
            axios({
                url: 'http://127.0.0.1:3000/user',
                method: 'POST',
                data: {
                    id: formData.get("userid"),
                    name: formData.get("username"),
                    ps: formData.get("ps")
                }
            }).then(res => {
                console.log(res)
            })
        }

        // 删除
        let cxBtn = document.querySelector('#cxBtn')
        cxBtn.onclick = (e) => {
            let cxid = document.querySelector('#cx').value
            console.log(cxid)
            axios({
                url: 'http://127.0.0.1:3000/del',
                method: 'DELETE',
                params: {
                    id:String(cxid)
                }
            }).then(res=>{
                console.log(res)
            })
        }

        // 改
        ggbtn.onclick = (e) => {
            e.preventDefault();
            let formData = new FormData(form)
            console.log(formData.get("userid"), formData.get("username"), formData.get("ps"))
            axios({
                url: 'http://127.0.0.1:3000/update',
                method: 'PUT',
                data: {
                    id: formData.get("userid"),
                    name: formData.get("username"),
                    ps: formData.get("ps")
                }
            }).then(res => {
                console.log(res)
            })
        }

        // 查询
        let chaxun = document.querySelector('#select')
        let box = document.querySelector('#cxbox')
        chaxun.onclick = (e) => {
            axios({
                url: 'http://127.0.0.1:3000/sel',
            }).then(res => {
                console.log(res)
                box.innerHTML=JSON.stringify(res.data)
            })
        }
    </script>
</body>

</html>